<template>
  <div>
    <!-- 里面分为两部分 -->
    <header>
      <div class="unlisted" v-if="false">
        <img src="@/assets/mobile.png">
        <router-link to="/login">登录 / 注册</router-link>
      </div>
      <div class="personal">
        geren zhonxin
       
      </div>
    </header>
    <!-- 公共部分 -->
    <div class="box">
      <van-grid clickable :column-num="2">
        <van-grid-item icon=" toutiao toutiao-shoucang" text="收藏" to="/" />
        <van-grid-item
          icon=" toutiao toutiao-lishi"
          text="历史"
          url="/vant/mobile.html"
        />
      </van-grid>  
    </div> 
    <div>
  <van-cell-group>
  <van-cell title="消息通知">
    <i slot="right-icon" class="toutiao toutiao-zuojiantou"></i>
  </van-cell>
  <van-cell title="小智同学">
     <i slot="right-icon" class="toutiao toutiao-zuojiantou"></i>
  </van-cell>
  </van-cell-group>
    </div>
  </div>
</template>

<script>
document.querySelector("body").style.backgroundColor = "#f5f7f9";
export default {};
</script>
<style lang="less" scoped>
header {
  display: flex;
  height: 370px;
  background-image: url(@/assets/banner.png);
  align-items: center;
  justify-content: center;
  .unlisted{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction:column;
  width: 185px;
	height: 185px;
  img {
    width: 132px;
	height: 132px;
  }
  a {
    font-size: 30px;
    color: #fff;
  }
}
}
.box {
  font-weight: 700;
 margin-bottom: 10px;
}

</style>